<template>
  <edit-dialog :defaultButton="false" :centerDialogVisible="visible"
    :tilte="selectTab === 'lost' ? '查看已过期拾取物品' : '查看已过期拾取物品'" @Cancel="handleCancel" @Submit="handleSubmit()"
    :width="dialogWidth" class="info-modal">
    <template #content>
      <!-- <div class="title">物品信息</div> -->
      <div class="content">
        <template v-if="selectTab === 'lost'">
          <el-carousel v-if="info?.files?.length > 0" height="240px">
            <el-carousel-item v-for="item in info?.files" :key="item">
              <img :src="item ? item?.resourceAddress : image.noImg" />
            </el-carousel-item>
          </el-carousel>
          <div v-else class="img">
            <img v-if="selectTab === 'lost'" :src="info?.files ? info?.files?.[0]?.resourceAddress || '' : image.noImg" />
            <img v-else :src="info?.goodsFiles ? info?.goodsFiles?.[0]?.resourceAddress || '' : image.noImg" />
          </div>
        </template>
        <template v-else>
          <el-carousel v-if="info?.goodsFiles?.length > 0" height="240px">
            <el-carousel-item v-for="item in info?.goodsFiles" :key="item">
              <img :src="item ? item?.resourceAddress : image.noImg" />
            </el-carousel-item>
          </el-carousel>
          <div v-else class="img">
            <img v-if="selectTab === 'lost'" :src="info?.files ? info?.files?.[0]?.resourceAddress || '' : image.noImg" />
            <img v-else :src="info?.goodsFiles ? info?.goodsFiles?.[0]?.resourceAddress || '' : image.noImg" />
          </div>
        </template>
        <div class="info">
          <div class="row">
            <div class="label">物品名称：</div>
            <div class="value">{{ info?.goodsName || '' }}</div>
          </div>
          <div class="row">
            <div class="label">物品类型：</div>
            <div class="value">{{ info?.goodsType || '' }}</div>
          </div>
          <div class="row">
            <div class="label">保质期：</div>
            <div class="value">
              {{ info?.timeLimit ?? '' }}
              {{ info?.timeLimitUnit == 'Y' ? '年' : info?.timeLimitUnit ==
                'H' ? '小时' : info?.timeLimitUnit == 'D' ? '天' : '' }}
            </div>
          </div>
          <template v-if="selectTab === 'lost'">
            <div class="row">
              <div class="label">失主姓名：</div>
              <div class="value">{{ info?.lostName || '' }}</div>
            </div>
            <div class="row">
              <div class="label">失主电话：</div>
              <div class="value">{{ info?.lostPhone || '' }}</div>
            </div>
            <div class="row">
              <div class="label">遗失时间：</div>
              <div class="value">
                {{ formatTime(info?.lostTimeStart) || '' }}
                <!-- ~
                {{ formatTime(info?.lostTimeEnd) || '' }} -->
              </div>
            </div>
          </template>
          <template v-else>
            <div class="row">
              <div class="label">拾取人姓名：</div>
              <div class="value">{{ info?.pickUpName || '' }}</div>
            </div>
            <div class="row">
              <div class="label">拾取电话：</div>
              <div class="value">{{ info?.pickUpPhone || '' }}</div>
            </div>
            <div class="row">
              <div class="label">拾取时间：</div>
              <div class="value">
                {{ formatTime(info?.pickUpTime) || '' }}
                <!-- ~
                {{ formatTime(info?.lostTimeEnd) || '' }} -->
              </div>
            </div>
          </template>
          <div class="row">
            <div class="label">航站楼：</div>
            <div class="value" v-if="selectTab === 'lost'">{{ info?.lostTerminal || '' }}</div>
            <div class="value" v-else>{{ info?.pickUpTerminal || '' }}</div>
          </div>
          <div class="row">
            <div class="label">具体遗失地：</div>
            <div class="value">{{ info?.pickUpPlace || '' }}</div>
          </div>
        </div>
      </div>
      <template v-if="selectTab === 'lost'">
        <div class="title">过期处置</div>
        <div class="info2">
          <div class="row">
            <div class="label">处置人</div>
            <div class="value">{{ info?.lastMender?.name ?? '' }}</div>
          </div>
          <div class="row">
            <div class="label">处置时间</div>
            <div class="value">{{ formatTime(info?.lastUpdateTime) || '' }}</div>
          </div>
        </div>
      </template>
    </template>
    <template #custom>
      <el-button @click="handleCancel">关闭</el-button>
    </template>
  </edit-dialog>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs';
import { image } from '@/assets/index'
import { ref, defineProps, defineEmits } from 'vue'
import editDialog from '@/components/editDialog/index.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  info: {
    type: Object,
    default: () => null,
  },
  selectTab: {
    type: String,
    default: 'lost'
  }
})

const emit = defineEmits(['cancel', 'ok'])


const dialogWidth = ref('760px')

const handleCancel = () => {
  emit('cancel')
}

const handleSubmit = async () => {
  emit('ok')
}

const formatTime = (str: string, ymd = 'YYYY-MM-DD HH:mm:ss') => {
  if (!str) {
    return ''
  }
  return dayjs(str).format(ymd)
}
</script>

<style lang="less" scoped>
.title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}


.content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;

  /deep/ .el-carousel {
    width: 240px;
    height: 240px;
    flex-shrink: 0;
    margin-right: 24px;
    .el-carousel__item{
      img{
        width: 240px;
        height: 240px;
      }
    }
  }

  .img {
    width: 240px;
    height: 240px;
    flex-shrink: 0;
    margin-right: 24px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .info {
    background: rgba(238, 243, 255, 0.56);
    flex-grow: 1;
    border-radius: 8px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    .row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        width: 84px;
        text-align: right;
        font-size: 14px;
        font-family: HarmonyOS_Sans_SC;
        color: #989DAA;
      }

      .value {
        font-size: 14px;
        font-family: HarmonyOS_Sans_SC;
        color: #535862;
        margin-left: 10px;
      }
    }
  }

}

.info2 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  .row {

    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 8px;

    .label {
      width: 100px;
      text-align: left;
      font-size: 14px;
      font-family: HarmonyOS_Sans_SC;
      color: #989DAA;
    }

    .value {
      font-size: 14px;
      font-family: HarmonyOS_Sans_SC;
      color: #535862;
      margin-left: 10px;
    }
  }
}

/deep/.el-dialog__header {
  padding-bottom: 0 !important;
}

/deep/.el-dialog__footer {
  padding-top: 0 !important;
}

/deep/.el-button {
  min-width: 88px;
}
</style>